<template>
  <div class="wrapper" @scroll="scrollChange" ref="scroll">
    <!-- 头部导航栏 -->
    <div class="container">
      <div class="nav">
        <div class="icon-user">
          <el-icon>
            <user />
          </el-icon>
          <div class="username">xiaotuxian001</div>
        </div>
        <span>|</span>
        <div>退出登录</div>
        <span>|</span>
        <div>我的订单</div>
        <span>|</span>
        <div>会员中心</div>
        <span>|</span>
        <div>帮助中心</div>
        <span>|</span>
        <div>关于我们</div>
        <span>|</span>
        <div class="icon-iphone">
          <el-icon>
            <Iphone />
          </el-icon>
          <div class="iphone">手机版</div>
        </div>
      </div>
    </div>

    <!-- 吸顶 -->
    <div class="sticky-box" v-if="scrollVisble">
      <div class="menu-scroll">
        <div class="logo-scroll">
          <h1/>
          <div class="menu-list">
            <div class="link"><a href="/">首页</a></div>
            <div
              class="link"
              v-for="item in categoryHeadList"
              :key="item.id"

            >
              <router-link
                :to="{
                  name: 'category',
                  params: {
                    id: item.id
                  }
                }"
              >
                {{ item.name }}
              </router-link>
              <el-card class="card-container">
                <div class="box-card">
                  <ul>
                    <li v-for="children in item.children" :key="children.id" @click="onChange(children.id)">
                      <!-- <a :href="`category/${children}`"> -->
                      <img :src="children.picture">
                      <div>{{ children.name }}</div>
                      <!-- </a> -->
                    </li>
                  </ul>
                </div>
              </el-card>
            </div>
            <div class="line">品牌</div>
            <div>专题</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 首页头部 -->
    <header>
      <div class="menu-scroll">
        <div class="logo-scroll">
          <h1/>
          <div class="menu-list">
            <div class="link"><a href="/">首页</a></div>
            <div
              class="link"
              v-for="item in categoryHeadList"
              :key="item.id"
            >
              <router-link
                :to="{
                  name: 'category',
                  params: {
                    id: item.id
                  }
                }">
                {{ item.name }}
              </router-link>

              <el-card class="card-container">
                <div class="box-card">
                  <ul>
                    <li v-for="children in item.children" :key="children.id" @click="onChange(children.id)">
                      <!-- <a href="#"> -->
                      <img :src="children.picture">
                      <p>{{ children.name }}</p>
                      <!-- </a> -->
                    </li>
                  </ul>
                </div>
              </el-card>
            </div>
            <div class="inp">
              <el-icon><Search /></el-icon>
              <input type="text" placeholder="搜一搜">
            </div>
            <el-popover
              placement="bottom-end"
              :width="400"
              trigger="hover"
            >
              <template #reference>
                <div class="shopping" @click="onChangeCart">
                  <el-icon :size="28"><ShoppingCart /></el-icon>
                  <div class="shopping-number">{{ getShoppingCartCount(shoppingCarts) }}</div>
                </div>
              </template>
              <div class="shopping-container">
                <div class="shopping-item-wrapper">
                  <div
                    class="shopping-item"
                    v-for="shoppingCart in shoppingCarts"
                    :key="shoppingCart.id"
                  >
                    <img :src="shoppingCart.picture" alt="">
                    <div class="shopping-center">
                      <div>{{ shoppingCart.name }}</div>
                      <div>{{ shoppingCart.attrsText }}</div>
                    </div>
                    <div class="shopping-price">
                      <div>￥{{ shoppingCart.nowPrice }}</div>
                      <div>x{{ shoppingCart.count }}</div>
                    </div>
                  </div>
                </div>
                <div class="shopping-btn">
                  <div class="total">
                    <div>共计{{ getShoppingCartCount(shoppingCarts) }}件商品</div>
                    <div>￥{{ getShoppingCartTotalPrice(shoppingCarts) }}</div>
                  </div>
                  <div>
                    <button>去购物车结算</button>
                  </div>
                </div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>

    </header>

    <!-- 可变视区 -->
    <div class="view-window">
      <router-view/>
    </div>

    <!-- 脚部 -->
    <div class="footer-window">
      <div class="service">
        <div>
          客户服务
        </div>
      </div>
      <div class="copyright">
        <div>
          价格
        </div>
        <div>
          关于我们
        </div>
      </div>
    </div>
  </div>
</template>
<script name="home" setup>
// hooks钩子函数
// 组合式API
import { ref } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const store = useStore();
const loading = ref(false);
// onActived(() => {
//   // store.dispatch('home/getCategoryHeadList');
//   console.log(123);
// });
// onDeactived(() => {
//   console.log(456);
// });

store.dispatch('home/updateHomeNavList');
const categoryHeadList = computed(() => store.state.home.homeNavList);


store.dispatch('home/updateShoppingCartList');
const shoppingCarts = computed(() => store.state.home.shoppingCartList);

// 购物车合计数量
// 1
function getShoppingCartCount(data) {
  return data.reduce((total, item) => {
    return total + item.count;
  }, 0);
}
// 2
// const shoppingCartCount = computed(() => {
//   let count = 0;
//   shoppingCarts.value.forEach((item) => {
//     count += item.count;
//   });
//   return count;
// });

// 购物车合计金额
function getShoppingCartTotalPrice(data) {
  return data.reduce((total, item) => {
    return total + item.nowPrice * item.count;
  }, 0);
}
// const shoppingCartTotal = computed(() => {
//   let total = 0;
//   shoppingCarts.value.forEach((item) => {
//     total += item.nowPrice * item.count;
//   });
const scrollVisble = ref(false);
const scroll = ref(null);

function scrollChange() {
  if (scroll.value.scrollTop > 100) {
    scrollVisble.value = true;
  } else {
    scrollVisble.value = false;
  }
}
function onChange(id) {
  router.push({
    name: 'sub',
    params: {
      id,
    },
  });
}
function onChangeCart() {
  router.push({
    name: 'cart',
  });
}
</script>
<style lang="scss" scoped>

  :deep(.el-dropdown-menu__item){
    padding: 0;
  }
.wrapper{
  overflow: auto;
  height: 100vh;
  width: 100%;

  // 首页头部
  header {
    width: 1240px;
    height: 132px;
    margin: 0 auto;
    position: relative;


    a {
      text-decoration: none;
      outline: none;
      color: #333;
    }

    .menu-scroll {
      background: #fff;
      // position: sticky;
      // z-index: 99;
      // top: 0;
      width: 100%;
      transition: all 1000s linear;
      .logo-scroll {
        width: 1240px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        h1 {
          width: 200px;
          height: 80px;
          background: url(../../images/logo.jpg) no-repeat center -5px/contain;
        }
        .menu-list {
          display: flex;
          padding-left: 40px;
          align-items: center;
          .inp{
            display: flex;
            align-items: center;
            width: 160px;
            height: 32px;
            border-bottom: 1px solid #eee;
            input{
              padding-left: 5px;
              outline: none;
              border: none;
            }
          }
          // 购物车
          .shopping{
            width: 50px;
            display: flex;
            // justify-content: center;
            align-items: center;
            position: relative;
            cursor: pointer;
            .shopping-number{
              padding: 1px 6px;
              font-size: 12px;
              line-height: 1;
              color: white;
              background-color: #e26237;
              border-radius: 10px;
              position: absolute;
              left: 6px;
              top: 6px;
              transform: translate(50%, -50%);
            }
          }
        }
        .link {
          height: 32px;
          margin-right: 40px;
          line-height: 32px;
          border: 1px solid #fff;

          &:hover {
            .link {
              //border-bottom: 1px solid red;
              cursor: pointer;
              color: #27ba9b;
            }

            a:hover {
              color: #27ba9b;
              border-bottom: 1px solid #27ba9b;
            }

            .card-container {
              opacity: 1;
              height: 150px;
              li:hover{
                cursor: pointer;
                color: #27ba9b;
              }
            }
          }
        }
        .line {
          position: relative;
          margin-left: 30px;
        }
        .line::before {
          position: absolute;
          content: "";
          width: 2px;
          height: 14px;
          top: 6px;
          right: 40px;
          background: #27ba9b;
        }
      }
    }
  }

  .card-container {
    width: 1240px;
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 10;
    opacity: 0;
    height: 0;
    margin: 0 auto;
    background-color: #fff;
    overflow: hidden;
    transition: all .5s;

    .box-card {
      padding: 0 70px;
      display: flex;

      a {
        text-decoration: none;
        color: #333;
        outline: none;
      }

      ul {
        display: flex;
        padding: 0;
        margin: 0;
        list-style: none;
      }

      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 40px;
        list-style: none;
      }
      img {
        height: 60px;
        width: 60px;
      }
      p {
        display: block;
        padding-top: 10px;
        margin: 0;
      }
    }
  }
}
// 吸顶
.sticky-box {
  position: sticky;
  z-index: 9999;
  top: 0;
  height: 80px;
  margin: 0 auto;
  background: #fff;
  a {
    text-decoration: none;
    outline: none;
    color: #333;
  }

.menu-scroll {
  position: sticky;
  z-index: 99;
  top: 0;
  width: 1240px;
  margin: 0 auto;
  transition: all 1000s linear;
  .logo-scroll {
    width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    h1 {
      width: 200px;
      height: 80px;
      margin: 0;
      background: url(../../images/logo.jpg) no-repeat center -5px/contain;
    }

    .menu-list {
      display: flex;
      padding-left: 40px;
      align-items: center;

      .link {
        height: 32px;
        margin-right: 40px;
        line-height: 32px;
        border: 1px solid #fff;


        &:hover {
          .link {
            //border-bottom: 1px solid red;
            cursor: pointer;
            color: #27ba9b;
          }
          a:hover {
            color: #27ba9b;
            border-bottom: 1px solid #27ba9b;
          }
          .card-container {
            opacity: 1;
            height: 150px;
            li:hover{
              cursor: pointer;
              color: #27ba9b;
            }
          }
        }
      }
      .line {
        position: relative;
        padding: 0 40px;
      }
      .line::before {
        position: absolute;
        content: "";
        width: 2px;
        height: 14px;
        top: 4px;
        left: 0px;
        background: #27ba9b;
      }
    }
  }
}

.card-container {
  width: 1240px;
  position: absolute;
  top: 80px;
  left: 0;
  z-index: 10;
  opacity: 0;
  height: 0;
  //margin: 0 auto;
  background-color: #fff;
  overflow: hidden;
  transition: all .5s;

  .box-card {
    padding: 0 70px;
    display: flex;

    a {
      text-decoration: none;
      color: #333;
      outline: none;
    }

    ul {
      display: flex;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 40px;
      list-style: none;
    }
    img {
      height: 60px;
      width: 60px;
    }
    p {
      display: block;
      padding-top: 10px;
      margin: 0;
    }
  }
}
}
.container{
  height: 53px;
  background-color: #333333;
  .nav{
    width: 1240px;
    height: 53px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    div{
      padding: 0 15px;
      color: #cdcdcd;
    }
    div:hover{
      color: #27ba9b;
    }
    span{
      color: #666;
    }

    .icon-user{
      display: flex;
      align-items: center;
      .username{
        padding-left: 2px;
      }
    }
    .icon-iphone{
      display: flex;
      align-items: center;
      .iphone{
        padding-left: 2px;
      }
    }
  }
}

.footer-window{
  height: 658px;
  margin-top: 40px;
  .service{
    div{
      width: 1240px;
      height: 290px;
      margin: 0 auto;
      outline: 1px solid #27ba9b;
    }
  }
  .copyright{
    background-color: #333333;
    color: #fff;
    & div:nth-child(1){
      width: 1240px;
      height: 178px;
      margin: 0 auto;
      border-bottom: 1px solid #aaa;
    }
    & div:nth-child(2){
      width: 1240px;
      height: 170px;
      margin: 0 auto;
    }
  }

}

.shopping-container{
  padding: 0;
  height: 380px;
  .shopping-item-wrapper{
    height: 310px;
    overflow: auto;
    .shopping-item {
      cursor: pointer;
      display: flex;
      padding: 10px 0;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      img{
        width: 80px;
        height: 80px;
      }
      .shopping-center{
        padding: 0 10px;
        width: 180px;
        & div:nth-child(2){
          color: #999;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          padding-top: 5px;
          font-size: 14px;
        }
      }
      .shopping-price{
        text-align: center;
        & div:nth-child(1){
          color: #cf4444;

        }
        & div:nth-child(2){
          color: #999;
          margin-top: 5px;

        }
      }
    }
  }
  .shopping-btn{
    width: 100%;
    height: 70px;
    background: #27ba9b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    background: #f8f8f8;
    .total{
      & div:nth-child(1){
        font-size: 14px;
      }
      & div:nth-child(2){
        color: #cf4444;
        font-size: 18px;
      }
    }
    button{
      width: 180px;
      height: 50px;
      padding: 1px 6px;
      background: #e6faf6;
      border: 1px solid #27ba9b;
      border-radius: 4px;
      font-size: 18px;
      color: #27ba9b;
    }
  }
}
:deep(.el-popover){
  --el-popover-padding: 50px
}
:deep(.el-popover){
  --el-popover-padding: 50px
}
</style>
